<template>
  <div class="app-container">
    <div class="configuration">
      <el-form ref="form" :model="form" size="mini" :rules="rules">
        <el-form-item label="作业人员允许休息时间：" prop="employeeFreeTime">
          <el-input type="number" v-model="form.employeeFreeTime" placeholder="请输入时间" style="width: 100px;" />
          <span class="tip">分钟</span>
        </el-form-item>
        <el-form-item label="作业车辆允许空闲时间：" prop="carFreeTime">
          <el-input type="number" v-model="form.carFreeTime" placeholder="请输入时间" style="width: 100px;" />
          <span class="tip">分钟</span>
        </el-form-item>
        <el-form-item label="作业车辆限速：" prop="speedLimit">
          <el-input type="number" v-model="form.speedLimit" placeholder="请输入时速" style="width: 100px;" />
          <span class="tip">时速（km/h）</span>
        </el-form-item>
      </el-form>
      <el-button type="primary" class="btn" @click="submit">提 交</el-button>
    </div>
  </div>
</template>

<script>
import { getconfig, updateconfig } from "@/api/system/trajectory";
export default {
  name: "Operlog",
  data() {
    return {
      rules: {
        employeeFreeTime: [
          { required: true, message: "请输入人员休息时间", trigger: "blur" },
        ],
        carFreeTime: [
          { required: true, message: "请输入允许车辆空闲时间", trigger: "blur" },
        ],
        speedLimit: [
          { required: true, message: "请输入作业车辆限速", trigger: "blur" },
        ],
      },
      // 表单参数
      form: {
        id:'',
        employeeFreeTime: null,
        employeeFreeTime: null,
        speedLimit: null,
      },
    };
  },
  async created() {
    const res = await getconfig();
    if (res.code == 200) {
      this.form = res.data
    }
  },
  methods: {
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          updateconfig(this.form).then((response) => {
            if(response.code == 200){
              this.$message.success("提交成功");
              return
            }
            this.$message.error("提交失败");
          });
        } else {
          this.$message.error("请检查输入格式");
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  display: flex;
  justify-content: center;

  .configuration {
    min-width: 400px;
  }

  .tip {
    margin-left: 10px;
  }

  .btn {
    margin-top: 50px;
    width: 100%;
  }
}
</style>
